<template>
    <header>
        <div class="header-container ">
            <div class="title" :class="{ 'show-menu': isShowMenu }"
                :style="{ 'font-size': isScroll ? `${scrollY}vw` : '9vw' }">APTOS
                LABS</div>
            <div class="menu-box" :class="{ 'show-menu': isShowMenu, 'is-scroll': isScroll }">
                <button class="menu-btn" @click="handleToggleMenu">
                    <figure class="inline-block">[</figure>
                    <span class="inline-block uppercase">MENU</span>
                    <figure class="text-[16px] -translate-y-[1px]">{{ isShowMenu ? 'x' : '☰' }}</figure>
                    <figure class="inline-block">]</figure>
                </button>
                <button class="dark-mode-btn" @click="toggleTheme">
                    <svg-icon :icon="isDark ? 'dark' : 'light'" class="dark:fill-dark-inverted" />
                </button>
            </div>
            <Nav :isShowMenu="isShowMenu" />
        </div>
    </header>
</template>
<script setup>
import Nav from '@/components/Nav.vue';
import { useTheme } from '@/composables/theme';
const { isDark, initTheme, toggleTheme } = useTheme();
const isShowMenu = ref(false);
const isScroll = ref(false);
const scrollY = ref(9);
const handleToggleMenu = () => {
    isShowMenu.value = !isShowMenu.value;
    if (isShowMenu.value) {
        document.body.style.overflow = 'hidden';
    } else {
        document.body.style.overflow = 'auto';
    }
};
const getTitleFontSize = (scrollY) => {
    console.log(scrollY);
    return Math.min(Math.max(4, 9 - scrollY / 160 * 5), 9);
};
onMounted(() => {
    initTheme();
    document.documentElement.classList.toggle('dark', isDark.value);
    window.addEventListener('scroll', () => {
        isScroll.value = window.scrollY > 0;
        console.log(window.scrollY, isScroll.value);
        scrollY.value = getTitleFontSize(window.scrollY);
    });
});
</script>
<style lang="scss" scoped>
header {
    @apply block fixed top-0 left-0 w-full h-full;
    @apply dark:bg-dark-primary dark:text-dark-inverted;
}

.header-container {
    .title {
        @apply opacity-100 transition-all duration-300 ease-in-out pointer-events-none;
        font-family: "Zagma Wide";
        font-size: 9vw;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        width: 100%;

        &.show-menu {
            font-size: 4vw;
        }
    }

    .menu-box {
        @apply flex items-center transition-all duration-300 ease-in-out absolute right-0 top-[7.5vw] z-50 w-[10rem];

        &.show-menu {
            @apply top-[10px];
        }

        &.is-scroll {
            @apply top-[10px];
        }
    }

    .menu-btn {
        @apply flex items-center justify-between gap-x-1;
        font-size: 12px;
    }

    .dark-mode-btn {
        @apply w-[1rem] h-[1rem] flex items-center justify-center ml-2;
    }
}

@media (max-width: 768px) {
    .header-container {
        .title {
            font-size: 9vw !important;

            &.show-menu {
                font-size: 9vw !important;
            }

        }

        .menu-box {
            @apply right-[calc(50%-9rem)] top-[10vw];

            &.show-menu {
                @apply top-[10vw] !important;
            }

            &.is-scroll {
                @apply top-[10vw] !important;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    .header-container {

        .menu-box {
            .menu-btn {
                font-size: 18px;
            }

            .dark-mode-btn {
                @apply w-[1.3rem] h-[1.3rem];
            }
        }
    }
}
</style>